<template>
  <div class="submission">
    <div class="info">
      <table>
        <tr>
          <th>用户名</th>
          <th>评测结果</th>
          <th>提交时间</th>
          <th>语言</th>
          <th>时间</th>
          <th>空间</th>
        </tr>
        <tr>
          <td><a @click="handleUserClick(submission.username)">{{ submission.username }}</a></td>
          <td v-if="submission.remoteVerdict ==='Accepted'" class="result-right">{{ submission.remoteVerdict }}</td>
          <td v-else class="result-error">{{ submission.remoteVerdict }}</td>
          <td>{{ parseTimestamp(submission.createTime) }}</td>
          <td>{{ submission.lang }}</td>
          <td>{{ submission?.result?.time === undefined ? 'NAN' : submission?.result?.time }}</td>
          <td>{{ submission?.result?.memory || 'NAN' }}</td>
        </tr>
      </table>
    </div>
    <div id="container" class="editor-container">
      <button class="copy-button" @click="copyCode">复制</button> <!-- 添加复制按钮 -->
    </div>
  </div>
</template>

<script setup lang="ts">
import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
import CssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
import HtmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
import TsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
import * as monaco from 'monaco-editor';
import { onMounted, onUnmounted, ref } from 'vue';
import router from '@/router';
import { getSubmissionById, getSubmissionDetailById } from '@/api/problem';
import { parseTimestamp } from '@/utils/parser';
import message from 'ant-design-vue/es/message';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore

const handleUserClick = (username: string) => {
  router.push({
    name: 'PersonPage',
    params: {
      username
    }
  });
};

self.MonacoEnvironment = {
  getWorker(_: any, label: string) {
    if (label === 'json') {
      return new JsonWorker();
    }
    if (label === 'css' || label === 'scss' || label === 'less') {
      return new CssWorker();
    }
    if (label === 'html' || label === 'handlebars' || label === 'razor') {
      return new HtmlWorker();
    }
    if (label === 'typescript' || label === 'javascript') {
      return new TsWorker();
    }
    return new EditorWorker();
  },
};
let editor: monaco.editor.IStandaloneCodeEditor;
const id = ref<number>(0);
const submission = ref<any>({});
const getEditorLanguage = (lang: string) => {
  const map: any = {
    c: 'c',
    cpp: 'cpp',
    jsNode: 'javascript',
    js: 'javascript',
  };
  return map[lang] as string;
};
onMounted(async () => {

  id.value = router.currentRoute.value.params.id as unknown as number;
  const res = await getSubmissionDetailById(id.value);

  submission.value = res;
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore
  editor = monaco.editor.create(document.getElementById('container'), {
    // eslint-disable-next-line max-len
    value: '// code here',
    language: getEditorLanguage(submission.value.lang),
    theme: 'vs-dark',
    lineNumbers: 'on',
    automaticLayout: true, // auto resize
    readOnly: true
  });
  editor.setValue(res.code);
});
onUnmounted(() => {
  editor.dispose();
});


const copyCode = () => {
  const code = editor.getValue();
  navigator.clipboard.writeText(code).then(() => {
    message.success('代码已复制到剪切板');
  }).catch((error) => {
    message.success('复制失败' + error);
  });
};

</script>

<style scoped lang="less">
.submission {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;

  .info {
    margin: 32px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 70%;
  }


  #container {
    width: 80%;
    height: 500px;
  }

  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
  }

  table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
  }

  th, td {
    padding: 8px;
    text-align: center; /* 内容居中 */
  }

  th {
    background-color: #f2f2f2;
  }

  tr:nth-child(even) {
    background-color: #f2f2f2;
  }

}

</style>

<style scoped>
.result-error {
  color: red;
}

.result-right {
  color: green;
}

.editor-container {
  position: relative;
}

.copy-button {
  position: absolute;
  top: 8px;
  right: 16px;
  z-index: 999; /* 确保按钮在最上层 */
}
</style>
